<template>
	<view class="tabs">
		<u-tabs ref="tabs" name="cate_name" :is-scroll="false" :list="tabs" :current="value" bg-color="#f5f5f5" :bold="false" @change="changeTabs" :bar-style="barStyle" :active-item-style="activeItemStyle" :height="80" :font-size="30" :bar-width="40" :bar-height="6" inactive-color="#797B80"></u-tabs>
	</view>
</template>

<script>
	export default {
		name:"tabs",
		data() {
			return {
				//底部滑块的样式
				barStyle:{
					bottom:'2rpx',
					background: '#359AFD'
				},
				//当前滑块样式
				activeItemStyle:{
					'font-size':'38rpx',
					color:'#333',
					"z-index":1,
				}
			};
		},
		props:{
			tabs:{
				type:Array,
				default:()=>{[]}
			},
			value:{
				type: [String, Number],
				default:0
			}
		},
		methods:{
			changeTabs(i){
				if(this.value!=i){
					this.$emit("input",i);
					this.$emit("change",i);
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabs{
		// position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		padding-bottom: 14rpx;
	}
</style>
